<template>
  <div>
    <!-- 操作列表 -->
    <JvOperationList :btnList="btnList"
                     @confirm="opConfirm"
                     max="3" />
    <!-- 查询表单头 -->
    <JvHeader @timeChange="timeChange"
              @query="query"
              @reset="reset">
    </JvHeader>
    <!-- 表格 -->
    <JvTable :data="tableData"
             @selectionChange="handleSelectionChange"
             ref="BillTable"
             jvKey="BillId">
      <el-table-column prop="BillId"
                       label="单据编号"></el-table-column>
      <el-table-column prop="companyName"
                       label="公司名称"></el-table-column>
      <el-table-column prop="date"
                       label="日期"></el-table-column>
      <el-table-column prop="people"
                       label="公司名称"></el-table-column>
      <el-table-column prop="state"
                       label="审核状态"></el-table-column>
      <el-table-column label="操作"
                       fixed="right"
                       width="110"
                       align="center">
        <template slot-scope="scope">
          <JvColBtn type="edit"
                    @click="edit"
                    :disabled="false" />
          <JvColBtn type="del"
                    @click="del" />
        </template>
      </el-table-column>

    </JvTable>
    <!-- 分页器 -->
    <JvPagination @size-change="sizeChange"
                  @current-change="currentChange"
                  :page-sizes="pager.Sizes"
                  :page-size="pager.PageSize"
                  :current-page.sync="pager.CurrentPage"
                  :layout="pager.Layout"
                  :total="pager.Total" />
  </div>
</template>

<script>
// import { Table } from '../../../src/class/table'
// import { OrderApi } from './OrderApi'
import JvTable from '../../../src/Jv_cpn/JvTable'
import JvColBtn from '../../../src/Jv_cpn/JvColBtn'
import JvOperationList from '../../../src/Jv_cpn/JvOperationList'
import JvHeader from '../../../src/Jv_cpn/JvHeader'
import JvPagination from '../../../src/Jv_cpn/JvPagination'

export default {
  components: {
    JvTable,
    JvColBtn,
    JvOperationList,
    JvHeader,
    JvPagination
  },
  data () {
    return {
      form: {
        BillId: '',
        ClientId: '',
        DateType: 'PlanDate',
        Type: '',
        StartDate: '',
        EndDate: '',
        PageSize: 20,
        CurrentPage: 1,
        SortColumn: 'WorkDate',
        SortOrder: 4
      },
      btnList: [{
        name: '新增',
        disabled: false
      }, {
        name: '删除',
        disabled: false
      }, {
        name: '明细查询',
        disabled: false
      }, {
        name: '收款查询',
        disabled: false
      }, {
        name: '导出',
        disabled: false
      }, {
        name: '打印预览',
        disabled: false
      }, {
        name: '快速打印',
        disabled: false
      }],
      tableObj: {},
      chooseList: [],
      tableData: [
        {
          BillId: '1',
          companyName: '上海皆唯',
          date: '2020-12-21',
          people: 'wjz',
          state: '已审核'
        },
        {
          BillId: '2',
          companyName: '腾讯',
          date: '2020-12-21',
          people: 'wjz',
          state: '已审核'
        },
        {
          BillId: '3',
          companyName: '字节跳动',
          date: '2020-12-21',
          people: 'wjz',
          state: '已审核'
        },
        {
          BillId: '4',
          companyName: 'bilibili',
          date: '2020-12-21',
          people: 'wjz',
          state: '已审核'
        },
        {
          BillId: '5',
          companyName: '阿里',
          date: '2020-12-21',
          people: 'wjz',
          state: '已审核'
        },
      ],
      pager: {
        // 分页参数
        PageSize: 20,
        // 当前页
        CurrentPage: 1,
        // 数据总量
        Total: 1,
        // 尺寸选项
        Sizes: [5, 10, 15, 20, 30, 50],
        // 显示模式
        Layout: 'total, sizes, prev, pager, next, jumper'
      }
    }
  },
  created () {
    // this.tableObj = new Table(this.form, OrderApi)
    // this.tableObj.getData()
    // this.tableObj.tableData = this.tableData
  },
  methods: {
    opConfirm (e) {
      switch (e.name) {
        case '新增':
          // this.add()
          break
        case '删除':
          // this.DeleteBill()
          break
        case '明细查询':
          // this.inquire()
          break
        case '收款查询':
          // this.CollectionInquiry()
          break
        case '导出':
          // this.export2Excel()
          break
        case '打印预览':
          // this.ReadyPrinting('Preview')
          break
        case '快速打印':
          // this.ReadyPrinting('Printing')
          break
        default:
          break
      }
    },
    handleSelectionChange (keys, itemList) {
      console.log(keys, itemList);
    },
    edit () { },
    del () { },
    sizeChange () { },
    currentChange () { },
    timeChange () { },
    query () { },
    reset () { }

  },
}
</script>
<style lang="scss">
.jv-table {
  table {
    margin: 0;
  }
}
.operation-list {
  position: absolute;
  top: 10px;
  right: 0;
  display: flex;
  justify-content: flex-end;
}
</style>